<template>
	<view class="index">
		<view class="xuanzuo">
			<view class="yingmu">
				<image src="https://z3.ax1x.com/2021/05/28/2F1vgs.png" mode="aspectFit"></image>
			</view>
			<view class="l3">
				<view v-for="(zuorow,index) in zuolist" :key="index" class="l3-1 l3list">
					<template v-for="item in zuorow">
						<view :class="{
								'wh': item.color ==='w' && item.id != zuolistnum,
								're': item.color === 'r',
								'no': item.color === 'n',
								'list-zuo': true,
								'ye': item.id === zuolistnum
							}" @click="xuanzuoclickFun(item.color, item.text, item.id)">
						</view>
					</template>
				</view>
			</view>
			<view class="l2">
				<view class="l2-l1">
					<text>当前已选</text>
					<view class="y t">

					</view>
				</view>
				<view class="l2-l2">
					<text>空闲</text>
					<view class="w t">

					</view>
				</view>
				<view class="l2-l3">
					<text>已有顾客</text>
					<view class="r t">

					</view>
				</view>
			</view>
		</view>
		<view class="yecard">
			<view class="title">
				{{ title }}
			</view>
			<view class="navlist">
				<view class="top asd">
					预订方式
				</view>
				<view class="bottom">
					<view v-for="item in arry" :class="{
						'list':true,
						'oklist': item.id === listnum
					}" @click="updateclass(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="times">
				<span class="asd">预定日期</span>
				<picker :mode="selecttype" @change="lefttimeF">
					<view class="select">
						{{lefttime}}
						<view class="sanjiao">

						</view>
					</view>
				</picker>
				<span>至</span>
				<picker :mode="selecttype" @change="righttimeF">
					<view class="select">
						{{righttime}}
						<view class="sanjiao">

						</view>
					</view>
				</picker>
			</view>
			<view class="asd2 a1">
				<image src="../../static/gan2.png" mode="" class="img"></image>
				<view class="">
					已选：{{ gettimes }}
				</view>
			</view>
			<view class="asd2 a2">
				<image src="../../static/gan1.png" mode="" class="img"></image>
				<view class="">
					可提前365天预定，最长可预定29天
				</view>
			</view>
			<view class="sumary">
				<view class="money">
					<text class="words">应付:</text>
					<text class="moneynum">￥{{money}}</text>
				</view>
				<view class="chairnum">
					<text>{{zuowei}}</text>
				</view>
			</view>
			<view>
				<button type="default" class="btn" @click="zhifu()">立即预定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				zuolist: [
					[{
							id: 0,
							color: "w",
							text: "A1"
						},
						{
							id: 1,
							color: "n",
							text: ""
						},
						{
							id: 2,
							color: "r",
							text: "A3"
						},
						{
							id: 3,
							color: "r",
							text: "A4"
						},
						{
							id: 4,
							color: "r",
							text: "A5"
						},
						{
							id: 5,
							color: "w",
							text: "A6"
						},
						{
							id: 6,
							color: "n",
							text: ""
						},
						{
							id: 7,
							color: "w",
							text: "A8"
						},
						{
							id: 8,
							color: "r",
							text: "A9"
						},
						{
							id: 9,
							color: "w",
							text: "A10"
						}
					],
					[{
							id: 10,
							color: "w",
							text: "A11"
						},
						{
							id: 11,
							color: "n",
							text: ""
						},
						{
							id: 12,
							color: "w",
							text: "A13"
						},
						{
							id: 13,
							color: "r",
							text: "A14"
						},
						{
							id: 14,
							color: "r",
							text: "A15"
						},
						{
							id: 15,
							color: "r",
							text: "A16"
						},
						{
							id: 16,
							color: "n",
							text: ""
						},
						{
							id: 17,
							color: "w",
							text: "A18"
						},
						{
							id: 18,
							color: "r",
							text: "A19"
						},
						{
							id: 19,
							color: "r",
							text: "A20"
						}
					],
					[{
							id: 20,
							color: "r",
							text: "A21"
						},
						{
							id: 21,
							color: "n",
							text: ""
						},
						{
							id: 22,
							color: "n",
							text: ""
						},
						{
							id: 23,
							color: "n",
							text: ""
						},
						{
							id: 24,
							color: "n",
							text: ""
						},
						{
							id: 25,
							color: "n",
							text: ""
						},
						{
							id: 26,
							color: "n",
							text: ""
						},
						{
							id: 27,
							color: "n",
							text: ""
						},
						{
							id: 28,
							color: "n",
							text: ""
						},
						{
							id: 29,
							color: "n",
							text: ""
						}
					],
					[{
							id: 30,
							color: "r",
							text: "A31"
						},
						{
							id: 31,
							color: "n",
							text: ""
						},
						{
							id: 32,
							color: "r",
							text: "A33"
						},
						{
							id: 33,
							color: "w",
							text: "A34"
						},
						{
							id: 34,
							color: "r",
							text: "A35"
						},
						{
							id: 35,
							color: "r",
							text: "A36"
						},
						{
							id: 36,
							color: "n",
							text: ""
						},
						{
							id: 37,
							color: "r",
							text: "A38"
						},
						{
							id: 38,
							color: "r",
							text: "A39"
						},
						{
							id: 39,
							color: "w",
							text: "A40"
						}
					],
					[{
							id: 40,
							color: "r",
							text: "A41"
						},
						{
							id: 41,
							color: "n",
							text: ""
						},
						{
							id: 42,
							color: "r",
							text: "A43"
						},
						{
							id: 43,
							color: "w",
							text: "A44"
						},
						{
							id: 44,
							color: "w",
							text: "A45"
						},
						{
							id: 45,
							color: "w",
							text: "A46"
						},
						{
							id: 46,
							color: "n",
							text: ""
						},
						{
							id: 47,
							color: "r",
							text: "A48"
						},
						{
							id: 48,
							color: "w",
							text: "A49"
						},
						{
							id: 49,
							color: "w",
							text: "A50"
						}
					],
					[{
							id: 50,
							color: "w",
							text: "A51"
						},
						{
							id: 51,
							color: "n",
							text: ""
						},
						{
							id: 52,
							color: "n",
							text: ""
						},
						{
							id: 53,
							color: "n",
							text: ""
						},
						{
							id: 54,
							color: "n",
							text: ""
						},
						{
							id: 55,
							color: "n",
							text: ""
						},
						{
							id: 56,
							color: "n",
							text: ""
						},
						{
							id: 57,
							color: "n",
							text: ""
						},
						{
							id: 58,
							color: "n",
							text: ""
						},
						{
							id: 59,
							color: "n",
							text: ""
						}
					],
					[{
							id: 60,
							color: "r",
							text: "A61"
						},
						{
							id: 61,
							color: "n",
							text: ""
						},
						{
							id: 62,
							color: "r",
							text: "A63"
						},
						{
							id: 63,
							color: "r",
							text: "A64"
						},
						{
							id: 64,
							color: "r",
							text: "A65"
						},
						{
							id: 65,
							color: "r",
							text: "A66"
						},
						{
							id: 66,
							color: "n",
							text: ""
						},
						{
							id: 67,
							color: "w",
							text: "A68"
						},
						{
							id: 68,
							color: "r",
							text: "A69"
						},
						{
							id: 69,
							color: "r",
							text: "A70"
						}
					],
					[{
							id: 70,
							color: "w",
							text: "A71"
						},
						{
							id: 71,
							color: "n",
							text: ""
						},
						{
							id: 72,
							color: "w",
							text: "A73"
						},
						{
							id: 73,
							color: "r",
							text: "A74"
						},
						{
							id: 74,
							color: "r",
							text: "A75"
						},
						{
							id: 75,
							color: "w",
							text: "A76"
						},
						{
							id: 76,
							color: "n",
							text: ""
						},
						{
							id: 77,
							color: "w",
							text: "A78"
						},
						{
							id: 78,
							color: "w",
							text: "A79"
						},
						{
							id: 79,
							color: "r",
							text: "A80"
						}
					]
				],
				zuowei: '未选坐',
				jiage: '0.00元',
				zuolistnum: -1,
				arry: [{
						id: 0,
						name: '按天'
					},
					{
						id: 1,
						name: '按小时'
					}
				],
				listnum: 0,
				selecttype: 'date',
				lefttime: '',
				righttime: '',
				gettimes: '0',
				money:0,
				dayprice:0,
				hourprice:0
			};
		},
		methods: {
			
			xuanzuoclickFun(color, text, id) {
				if (color === 'r') {
					this.zuolistnum = id
					this.zuowei = '座位已经有人啦'
					this.jiage = '';

					return;
				}
				if (color === 'w') {
					this.zuolistnum = id
					this.zuowei = text
					this.jiage = '6.00元';

					return;
				}
			},
			downshow() {
				this.$emit('gainian')
			},
			zhifu() {
				this.$emit('zhifu')
				uni.showToast({
					title: "支付成功",
					icon: "none"
				})
			},
			updateclass(id) {
				this.listnum = id
				this.lefttime = ''
				this.righttime = ''
				this.money = 0
				this.gettimes = '0'
				if (id === 0) {
					this.selecttype = 'date'
				} else {
					this.selecttype = 'time'
				}
			},
			lefttimeF(e) {
				this.lefttime = e.detail.value
				this.gettime()
			},
			righttimeF(e) {
				this.righttime = e.detail.value
				this.gettime()
			},
			gettime() {

				if (this.lefttime !== '' && this.righttime !== '') {
					if (this.selecttype === 'date') {
						let leftarry = this.lefttime.split('-')
						let rightarry = this.righttime.split('-')
						console.log(leftarry);
						let num = 0
						if (parseInt(leftarry[0]) !== parseInt(rightarry[0])) {

							num = (parseInt(rightarry[0]) - parseInt(leftarry[0])) * 365
						}
						if (parseInt(leftarry[1]) !== parseInt(rightarry[1])) {
							num = num + (parseInt(rightarry[1]) - parseInt(leftarry[1])) * 30
						}
						if (parseInt(leftarry[2]) !== parseInt(rightarry[2])) {
							num = num + (parseInt(rightarry[2]) - parseInt(leftarry[2]))
						}
						this.gettimes = num + 1 + '天'
						this.money = this.dayprice*(num+1)
					} else {
						let leftarry = this.lefttime.split(':')
						let rightarry = this.righttime.split(':')
						let num = 0
						if (parseInt(leftarry[0]) !== parseInt(rightarry[0])) {
							num = (parseInt(rightarry[0]) - parseInt(leftarry[0])) * 60
						}
						if (parseInt(leftarry[1]) !== parseInt(rightarry[1])) {
							num = num + (parseInt(rightarry[1]) - parseInt(leftarry[1]))
						}
						this.gettimes = num + 1 + '分钟'
						this.money = Math.ceil(this.hourprice*((num+1)/60))
					}
				}
			},
			zhifu(){
				if(this.zuolistnum===-1){
					uni.showToast({
						title: "请选择座位",
						icon: "none"
					})
				}
				else if(this.money===0){
					uni.showToast({
						title: "请选择日期",
						icon: "none"
					})
				}
				else{
					uni.showToast({
						title: "支付成功",
						icon: "none"
					})
					setTimeout(function(){uni.navigateBack()
					}, 1000)
					
				}
			}
		},
		onLoad: function(option) {
			this.title = option.name
			this.dayprice = option.dayprice
			this.hourprice = option.hourprice
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: rgba(239, 239, 239, 1.0);
	}

	.xuanzuo {
		padding: 20rpx;
	}
	.yingmu{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 30rpx;
		margin-bottom: 92rpx;
	}
	.l1 {
		margin: 0 auto;
		padding: 10rpx 50rpx;
		color: #5a6b73;
		border: 1rpx solid #5a6b73;
		font-size: 45rpx;
		width: 220rpx;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.t {
		width: 25rpx;
		height: 25rpx;
		border: 1rpx solid #5a6b73;

	}

	.l2 {
		display: flex;
		justify-content: flex-end;
		flex-direction: row;
		align-items: center;
		gap: 50rpx;
		margin-right: 100rpx;
		text-align: center;
		margin-top: 46.67rpx;

		.l2-l1 {
			display: flex;
			align-items: center;
			flex-direction: row;
			gap: 10rpx;

			.y {
				background-color: #fede01;
			}
		}

		.l2-l2 {
			display: flex;
			align-items: center;
			flex-direction: row;
			gap: 10rpx;

			.w {
				background-color: #bababa;
			}
		}

		.l2-l3 {
			display: flex;
			align-items: center;
			flex-direction: row;
			gap: 10rpx;

			.r {
				background-color: #ff787f;
			}
		}
	}

	.l3 {
		margin: 0 auto;
		padding: 16rpx;
	}

	.list-zuo {
		width: 41.33rpx;
		height: 41.33rpx;
		border-radius: 10rpx;
		border: 1rpx solid #5a6b73;
		text-align: center;
		transition: all 0.3s;
	}

	.no {
		width: 41.33rpx;
		height: 41.33rpx;
		margin: 0rpx 2rpx;
		border: none;
	}

	.ye {
		background-image: url('https://z3.ax1x.com/2021/05/27/2iE3Jf.png');
		background-size: 30rpx 30rpx;
		background-repeat: no-repeat;
		background-position: center;
	}

	.wh {
		background-image: url('https://z3.ax1x.com/2021/05/27/2iVpp8.png');
		background-size: 30rpx 30rpx;
		background-repeat: no-repeat;
		background-position: center;
	}

	.re {
		background-image: url('https://z3.ax1x.com/2021/05/27/2iEmsH.png');
		background-size: 30rpx 30rpx;
		background-repeat: no-repeat;
		background-position: center;
	}

	.l3list {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin: 14.67rpx 0;
	}

	.l3-1 {
		justify-content: center !important;
		gap: 14.67rpx;
	}

	.btn {
		margin-top: 25rpx;
		width: 500rpx;
		height: 80rpx;
		font-weight: 600;
		background-color: #fedd00;
		border-radius: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.asd {
		color: #000;
		font-weight: 550;
	}

	.asd2 {
		font-size: 22rpx;
		display: flex;
		align-items: center;

		.img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}
	}

	.a1 {
		color: red;
	}

	.a2 {
		margin-top: 15rpx;
		color: #7f7f7f;
	}

	.yecard {
		display: flex;
		flex-direction: column;
		height: 600rpx;
		margin: 0 20rpx;
		margin-top: 80rpx;
		justify-content: space-evenly;
		box-sizing: border-box;
		padding: 26rpx;
		border-radius: 35rpx;
		background-color: #fff;
	}

	.title {
		margin: 0 auto;
		font-weight: 800;
		font-size: 55rpx;
	}

	.navlist {
		.bottom {
			margin-top: 15rpx;
			display: flex;

			.list {
				width: 170rpx;
				height: 75rpx;
				background-color: #f6f6f6;
				margin-right: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15rpx;
				transition: all 0.3s;
			}
		}
	}

	.oklist {
		background-color: #ffdc00 !important;
	}

	.select {
		width: 230rpx;
		height: 60rpx;
		background-color: #f6f6f6;
		border-radius: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.sanjiao {
			position: absolute;
			bottom: 15rpx;
			right: 15rpx;
			width: 0;
			height: 0;
			border-top: 7rpx solid rgba(0, 0, 0, 0);
			border-bottom: 7rpx solid #494949;
			border-right: 7rpx solid #494949;
			border-left: 7rpx solid rgba(0, 0, 0, 0);
		}
	}

	.times {
		margin: 15rpx 0 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sumary{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.money{
			.words{
				font-size: 25rpx;
			}
			.moneynum{
				font-size: 35rpx;
				color: #ff5500;
			}
		}
	}
	
</style>
